<template>
<van-swipe-cell>
  <van-row
    type="flex"
    justify="space-between"
    align="center"
    class="bg-f padded-10"
  >
    <van-col :span="20">
      <van-badge content="默认" v-if="address.default">
        <div>
          <span v-text="address.name"></span>
          <span v-text="address.phone" class="p-l-10"></span>
        </div>
      </van-badge>
      <div v-else>
          <span v-text="address.name"></span>
          <span v-text="address.phone" class="p-l-10"></span>
        </div>
      <div class="ftn13 p-t-5 van-ellipsis">{{address.detail}}</div>
    </van-col>
    <van-col :span="4" class="text-right" @click="editAddress(address.id)">
      <van-icon name="edit" color="#777" size="20"/>
    </van-col>
  </van-row>
  <template #right>
    <van-button square type="danger" text="删除" @click="delAddress(address.id)"/>
  </template>
</van-swipe-cell>
  
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import type { PropType } from "vue";
import type { IAddress } from "@/types";
import { useRouter } from "vue-router";
import { useStore } from "@/stores/store";
import { fnMsg, fnDialog } from "@/plugins/common";
export default defineComponent({
  props: {
    item: {
      type: Object as PropType<IAddress>,
      required: true,
    },
  },
  setup(props: any, ctx) {
    let { item } = props, store = useStore();
    const address = ref<IAddress>(item), router = useRouter();
    const editAddress = (id?: number) => {
      router.push({
        name: 'editAddress',
        params: {
          id: id
        },
        query: {
          title: '编辑地址'
        }
      })
    }
    // 删除
    const delAddress = (id?: number) => {
      let list = store.state.addressData.list;
      fnDialog("提示", "确认删除此收货地址吗?")
        .then(() => {
          let index = list.findIndex((item: any) => id == item.id);
          list.splice(index, 1);
          store.commit("addAddress", list);
          ctx.emit('update');
          fnMsg("删除成功!");
        })
        .catch(() => {
          fnMsg("取消删除");
        });
    };
    return {
      address,
      editAddress,
      delAddress
    };
  },
});
</script>
